<template>
	<!-- 商学院————发布 -->
	<view class="">
		<view class="input-group">
			<view class="input-row border-bottom-1px">
				<text class="title">举报原因</text>
				<view class="picker row align-width">
					<picker @change="categoryChange" :value="categorValue" range-key="name" :range="categorOption"
						class="pickstyle">
						<input class="padding-10" disabled="true" placeholder="请选择" :value="issueData.categoryName" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row">
				<text class="title">具体情况说明</text>
			</view>
			<view class="input-row" style="align-items: inherit;">
				<view class="input-row-item" style="width:630rpx; margin-left: 30rpx;background-color: rgb(249, 250, 251);padding: 30rpx;border-radius: 15rpx;">
					<textarea class="remarktextarea" :maxlength="len" style="width:645rpx;min-height: 325rpx;" placeholder="补充详细说明,可帮助工作人员快速定位问题,快速处理"
						v-model="issueData.content"></textarea>
				</view>
			</view>
			<view class="border-bottom-1px bg-ff i-1" style="padding-bottom: 30rpx;">
				<text class="title  pad-top-20 dis-block pad-left-25" style="width: 40%;">图片正面<text style="color: #CCCCCC;">(最多6张)</text></text>
				<view class="head-img flex">
					<image @click="uploadImgs(index)" v-for="(item,index) in tmpImageUrl" :src="item" :key="index">
					</image>
					<image @click="uploadImgs" v-if="tmpImageUrl.length < 6"
						src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/sqzp/common/MQrRNCdyBG.png">
					</image>
				</view>
			</view>
		</view>
		<view class="btn-row row">
			<button type="primary" class="btn-save width-90" @tap="register">提交</button>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				issueData: {
					categoryId: '',
					title: '',
					content: '',
					imgUrl: '',
				},
				len: 500,
				categorOption: [],
				checkedIndex: false,
				userIntegration: 0, // 用户剩余积分
				configIntegral: 0, // 发帖消耗积分
				tmpImageUrl: [],
				ossImageUrl: []
			}
		},
		onLoad(option) {
			if(option && option.postsId) {
				// 帖子id
				console.log(option.postsId)
			}
			this.getCategory()
		},
		methods: {
			// 获取字典 举报原因
			getCategory() {
				
			},
			// 选择类别
			categoryChange(e) {
				this.issueData.categoryId = this.categorOption[e.detail.value].id
				this.issueData.categoryName = this.categorOption[e.detail.value].name
			},
			// 选择营业执照 或 logo
			uploadImgs(index) {
				var that = this
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						if (typeof index == 'number') {
							that.tmpImageUrl.splice(index, 1)
						}
						that.tmpImageUrl.push(tempFilePaths[0])
						that.uploadFile(index);
					}
				});
			},
			// 上传图片
			uploadFile(index) {
				uni.showLoading({
					title: '图片上传中'
				});
				uploadImage(0, this.tmpImageUrl[this.tmpImageUrl.length - 1], 'person/collegeposts/', result => {
					if (typeof index == 'number') {
						this.ossImageUrl.splice(index, 1)
					}
					this.ossImageUrl.push(result)
					this.issueData.imgUrl = this.ossImageUrl.join()
					uni.hideLoading();
				})
			},
			// 点击注册按钮
			async register() {
				if (!this.checkRoule()) return
				// 过了校验之后那wxUserId
				this.issueData.wxUserId = this.userInfo.id
				// 调用发帖接口
				console.log(this.issueData)
				// 需要调用举报接口
				let res = await this.$apis.addCollegePosts(this.issueData)
				if (res) {
					uni.showToast({
						title: '提交成功'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 1200)
				} else {
					uni.showToast({
						title: '提交失败'
					})
				}
			},
			// 校验
			checkRoule() {
				if (!this.issueData.categoryId) {
					uni.showToast({
						icon: 'none',
						title: '请选择发帖类型'
					});
					return false;
				}
				if (!this.issueData.title) {
					uni.showToast({
						icon: 'none',
						title: '请输入帖子标题'
					});
					return false;
				}
				if (!this.issueData.content) {
					uni.showToast({
						icon: 'none',
						title: '内容不能为空'
					});
					return false;
				}
				return true;
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #f6f6f6;

		.input-group {
			border-radius: 8rpx;

			.border-bottom-1px {
				position: relative;

				&::after {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					left: 20upx;
					height: 1upx;
					content: '';
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					background-color: #e2e2e2;
				}
			}

			.head-img {
				margin: 12rpx;
				border-radius: 8rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					display: block;
					margin: 8rpx;
				}
			}

			.input-row {
				display: flex;
				flex-direction: row;
				position: relative;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.yzb-next {
					color: $font-color-999;
					text-align: center;
					font-size: 48rpx;
					position: relative;
					top: 13rpx;
				}

				.title {
					width: 25%;
					padding: 20upx 0;
					padding-left: 30upx;
					line-height: 50upx;
					color: #333;
				}

				.pickstyle {
					width: 460rpx;

					input {
						font-size: 28rpx;
						text-align: left;
						height: 60rpx;
					}
				}

				.input-row-item {
					width: 568rpx;

					.remarktextarea {
						height: 205rpx;
						width: 494rpx;
					}

					input {
						text-align: left;
						font-size: 28rpx;
					}
				}
			}
		}

		.i-1 {
			padding: 0 4%;
		}

		.agreement2 {
			position: relative;
			top: 4px;
		}

		.btn-row {
			width: 100%;
			box-sizing: border-box;

			.btn-save {
				background-color: #84C0F4;
				height: 90upx;
				line-height: 90upx;
				font-size: $font-size-34;
			}

			.width-55 {
				width: 55%;
			}

			.width-90 {
				width: 90%;
				margin: 60rpx auto;
			}
		}
	}
</style>
